<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: adminstar
  Date: 2021/12/7
  Time: 18:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/logo.png"/>
    <title>物资管理调度系统</title>
    <link href="${pageContext.request.contextPath}/afterEnd/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/afterEnd/css/mmss.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/afterEnd/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/afterEnd/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/afterEnd/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/afterEnd/js/respond.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/afterEnd/layui/layui.js"></script>
</head>
<body>
<header>
    <%@ include file="element/top.jsp" %>
</header>
<script src="${pageContext.request.contextPath}/afterEnd/js/jquery.js"></script>
<script>
    window.onload = function () {
        setTimeout(intl(),1000)

    }

    function intl(){
        $.ajax({
            "url":"/SheepShoppingMall/CommodityClassServlet",
            "type":"post",
            "data":"opr=Classlist",
            "dataType":"json",
            "success":function (data){
                    $("tbody").text("")
                for (let i = 0; i < data.length; i++) {
                    $("tbody").append("<tr>" +
                        "<td>" + data[i].id + "</td>" +
                        "<td>" + data[i].className + "</td>" +
                        "<td>" +
                        "<a href='#' class='btn btn-primary btn-sm' data-toggle='modal' data-target='#edit'" +
                        "data-whatever='编辑' onclick='updateMsg("+data[i].id+")'>编辑</a>" +
                        "<a href='javascript:void(0)' index='" + data[i].id + "' onclick='delid(this)' class='btn btn-primary btn-sm'>删除</a>" +
                        "</td>" +
                        "</tr>")
                }
            }
        })
    }

    function updateMsg(id){
        $.ajax({
            "url":"/SheepShoppingMall/CommodityClassServlet",
            data:{
                opr:"findByid",
                id:id,
            },
            type:"post",
            dataType:"json",
            "success": function (data) {
                $("#id").val(data.id)
                $("#Name").val(data.className)

            }
        })
    }



    function delid(id) {
        let nm = $(id).attr('index')
        let con = confirm("确定删除吗？");
        if (con == true) {
            $.ajax({
                "url": "/SheepShoppingMall/CommodityClassServlet",
                "type": "post",
                "data": "opr=delid&id=" + nm,
                "success": function (data) {
                    if (data == "true") {
                        alert("删除成功！")
                        intl();
                    } else {
                        alert("删除失败！")
                    }
                }
            })
        }
    }
</script>

<section>
    <div class="container-fluid">
        <div class="row">
            <!--左侧导航开始-->
            <%@ include file="element/element.jsp" %>
            <!--左侧导航结束-->
            <!----------------------------------------------------------------------------------------------------->
            <!--右侧内容开始-->
            <div class="col-xs-10">
                <br/>
                <ol class="breadcrumb">
                    <li><a href="index.jsp"><span class="glyphicon glyphicon-home"></span>&nbsp;后台首页</a></li>
                    <li class="active">系统管理 - 表格</li>
                </ol>
                <div class="input-group line left">
                    <span class="input-group-addon" id="basic-addon2"><span
                            class="glyphicon glyphicon-search"></span></span>
                    <input type="text" id="select" class="form-control" placeholder="输入名称关键字搜索"
                           aria-describedby="basic-addon2">
                    <a href="#" class="btn btn-primary btn-sm" data-toggle="modal"
                       style="position: absolute;right: -1000px" data-target="#add1">添加分类</a>
                </div>
                <div class="modal fade" id="add1" tabindex="-1" role="dialog" aria-labelledby="add11">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="add11">添加分类</h4>
                            </div>
                            <form id="addAll" action="${pageContext.request.contextPath}/CommodityClassServlet?opr=add" method="post">
                                <div class="modal-body">
                                    <ul>
                                        <li>
                                            <label><span>类型名称：</span></label>
                                            <input id="className" type="text" name="className"/>
                                        </li>
                                    </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消
                                    </button>
                                    <button type="button" onclick="document.getElementById('addAll').submit();"
                                            class="btn btn-primary btn-sm">保存</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="edit" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel1">编辑</h4>
                            </div>
                            <form id="update" action="${pageContext.request.contextPath}/CommodityClassServlet?opr=update" method="post">
                            <div class="modal-body">
                                <ul>
                                    <li>
                                        <label><span>类型名称：</span></label>
                                        <input id="Name" type="text" name="className"/>
                                        <input id="id" type="text" name="id" style="display: none" >
                                    </li>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                <button type="button" onclick="document.getElementById('update').submit();"
                                        class="btn btn-primary btn-sm">保存</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>

                <br/><br/>
                <table class="table table-bordered table-striped text-center bg-info">
                    <thead>
                    <tr class="info">
                        <th class="text-center">类型编号</th>
                        <th class="text-center">类型名称</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <%--   信息显示--%>
                    </tbody>
                </table>

                <div id="test1"></div>
            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</section>

<footer class="bg-primary navbar-fixed-bottom">
    <p class="text-center text-white">版权所有&copy;MMSS</p>
</footer>
<script src="${pageContext.request.contextPath}/afterEnd/js/jquery-1.11.3.js"></script>
<script src="${pageContext.request.contextPath}/afterEnd/js/bootstrap.js"></script>
<script>
    //    添加编辑模态框
    $('#add').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('' + recipient)
        modal.find('.modal-body input').val(recipient)
    })
</script>
</body>
</html>